<template>
    <div class="contract">
        <ToolBar :names="names"></ToolBar>
        <el-radio-group v-model="tabPosition">
            <el-radio-button label="top">Huobi</el-radio-button>
            <el-radio-button label="right">OKEx</el-radio-button>
        </el-radio-group>

        <div class="tab-content" v-if="tabPosition==='top'">
            <div class="dataList" v-for="(h,index) in Huobi" :key="index">
                <div class="name">
                    <span class="title">{{h.title}}
                        <span v-if="h.time == 1">当周</span>
                        <span v-if="h.time == 2">次周</span>
                        <span v-if="h.time == 3">季度</span>
                    </span>
                    <span class="date">{{h.times}}</span>
                </div>

                <div class="name">
                    <span class="title">${{h.nowprice}}</span>
                    <span class="date">￥{{h.CNY}}</span>
                </div>
                <div class="button" @click.prevent="changesta" :class="h.lv<0?'active':''">
                    <span>{{h.lv*100|parseint}}%</span>
                </div>
                <div class="switch">
                    <el-switch
                            v-model="h.user==1"
                            active-color="#13ce66"
                            inactive-color="#D0D0D1"
                            @change="changestatus(h.cu_id,h.time)"
                            >
                    </el-switch>
                </div>

            </div>



        </div>

        <div class="tab-content" v-if="tabPosition==='right'">
            <div class="dataList" v-for="(h,index) in OKEx" :key="index">
                <div class="name">
                    <span class="title">{{h.title}}
                        <span v-if="h.time == 1">当周</span>
                        <span v-if="h.time == 2">次周</span>
                        <span v-if="h.time == 3">季度</span>
                    </span>
                    <span class="date">{{h.times}}</span>
                </div>

                <div class="name">
                    <span class="title">${{h.nowprice}}</span>
                    <span class="date">￥{{h.CNY}}</span>
                </div>
                <div class="button" @click.prevent="changesta" :class="h.lv<0?'active':''">
                    <span>{{h.lv*100|parseint}}%</span>
                </div>
                <div class="switch">
                    <el-switch
                            v-model="h.user==1"
                            active-color="#13ce66"
                            inactive-color="#D0D0D1"
                            @change="changestatus(h.cu_id,h.time)"
                    >
                    </el-switch>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import ToolBar from "@/components/Home/ToolBar.vue"
    export default {
        name: "contract",
        components:{
            ToolBar
        },
        data(){
            return {
                names:'合约提醒',
                tabPosition: 'top',
                value:false,
                value1:false,
                value2:false,
                Huobi:[],
                OKEx:[]
            }
        },
        filters:{
            parseint(val){
                let num = ''
                if(val>0){
                    num = '+' + val.toFixed(2)
                }else{
                    num = val.toFixed(2)
                }
                return num
            }
        },
        mounted() {
           this.getList()

        },
        methods:{
            changestatus(id,time,index){


                this.$api.home.HeYueSet(this.getCookie('token'),id,time).then(res=> {
                    // 执行某些操作
                    // this.$toast({
                    //     message: res.data.msg,
                    //     duration: 1000,
                    //     forbidClick: true
                    // })

                    this.getList()
                })

            },
            getList(){
                this.$api.home.HeYueCurrency(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.Huobi = res.data.data.Huobi
                    this.OKEx = res.data.data.OKEx

                })
            }
        }
    }
</script>

<style scoped>
    .contract{
        position: relative;
        top: 3rem;
        left: 0;
        right: 0;
        /*overflow: hidden;*/
    }
    .tab-content{
        background: #fff;
        position: absolute;
        height: 50rem;
        top: 3.6618rem;
        left: 0;
        right: 0;
        z-index: -1;
        padding-top: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

    }
    .dataList{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    .dataList>div{
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 0.5rem 0;
        height: 4rem;

    }
    .dataList>div:first-child{
        padding-left: 1rem;
    }
    .name>span{
        display: inline-flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .dataList>div:first-child span{
        justify-content: flex-start;
    }
    .title{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);

    }
    .title span{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        margin-left: 0.3rem;
    }
    .date{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .button span{
        width:4rem;
        height:1.75rem;
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(254,255,255,1);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .button.active span{
        width:4rem;
        height:1.75rem;
        border-radius:0.2rem;
        background: #FF3131;
    }
</style>
<style>
    .contract{
        background: #fff;
    }
    .contract .el-radio-group{
        position: fixed;
        top: 3rem;
        width: 100%;
        left: 0;
        right: 0;
        background: #fff;
        text-align: center;
    }
    .contract .el-radio-button{
        margin-top: 1rem!important;

    }
    .contract .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        background:rgba(20,163,101,1);
        border-color:rgba(20,163,101,1);
        box-shadow: none!important;
    }
    .contract .el-radio-button__inner{
        color: rgba(20,163,101,1);
        padding: 0.8rem 3rem!important;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;

    }

</style>